<!-- 设备异常告警统计 -->
<template>
  <div class="mes-container">
    <div class="containerBox">
      <canvas id="canvas" style="position: absolute;top: 0;left: 0;"></canvas>
      <!-- 头部 -->
      <all-title ref="allTitle" :comp-info="compInfo" :title-name="titleName" />
      <div class="contentBox">
        <div class="contentTopBox">
          <div class="contentTopLeft allStyles">
            <div class="contentLeft leftTopall">
              <h1>{{oneEqObj.equipName}}</h1>
              <div class="allEchartsBox">
                <left-echarts-gauge ref="leftEchartsGauge" />
                <div class="imgDiv">
                  <el-image :src="oneEqObj.url">
                    <div slot="error" class="image-slot">
                      <i class="el-icon-picture-outline" style="color:#fff;"></i>
                    </div>
                  </el-image>
                </div>
              </div>
            </div>
            <div class="contentRight leftTopall">
              <h1>{{twoEqObj.equipName}}</h1>
              <div class="allEchartsBox">
                <left-echarts-gauges ref="leftEchartsGauges" />
                <div class="imgDiv">
                  <el-image :src="twoEqObj.url">
                    <div slot="error" class="image-slot">
                      <i class="el-icon-picture-outline" style="color:#fff;"></i>
                    </div>
                  </el-image>
                </div>
              </div>
            </div>
          </div>
          <div class="contentTopRight allStyles">
            <div class="overview panel">
              <div class="inner">
                <h3>设备异常信息</h3>
              </div>
              <div class="allBox">
                <right-top-echarts-line ref="rightTopEchartsLine" />
              </div>
            </div>
          </div>
        </div>
        <div class="contentBottomBox">
          <div class="contentBottomLeft allStyles">
            <div class="overview panel">
              <div class="inner">
                <h3>设备警告提醒</h3>
              </div>
              <div class="allBox">
                <bottom-left-info ref="bottomLeftInfo" />
              </div>
            </div>
          </div>
          <div class="contentBottomRight allStyles">
            <div class="overview panel">
              <div class="inner">
                <h3>设备异常统计</h3>
              </div>
              <div class="allBox">
                <right-echarts-line ref="rightEchartsLine" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { bgFun } from '../../../bg.js'
import allTitle from '../components/allTitle'
import rightTabInfo from './components/rightTabInfo'
import bottomLeftInfo from './components/bottomLeftInfo'
import rightEchartsLine from './components/rightEchartsLine'
import leftEchartsGauge from './components/leftEchartsGauge'
import leftEchartsGauges from './components/leftEchartsGauges'
import rightTopEchartsLine from './components/rightTopEchartsLine'
export default {
  name: 'EqAbnormality',
  components: {
    allTitle,
    rightTabInfo,
    bottomLeftInfo,
    rightEchartsLine,
    leftEchartsGauge,
    leftEchartsGauges,
    rightTopEchartsLine
  },
  data() {
    return {
      titleName: '设备异常看板',
      leftInfo: [],
      oneEqObj: {},
      twoEqObj: {}
    }
  },
  computed: {
    ...mapGetters(['compInfo'])
  },
  created() {},
  async mounted() {
    const loading = this.$loading({
      lock: true,
      text: '数据加载中...', // 数据加载中...
      spinner: 'el-icon-loading',
      background: 'rgba(0, 0, 0, 0.7)'
    })
    setTimeout(async () => {
      loading.close()
      bgFun()
    }, 500)
    this.getInfo()
    /* 根据浏览器收缩echarts重铸 */
    window.onresize = () => {
      if (this.$refs['rightTopEchartsLine'].myChart)
        this.$refs['rightTopEchartsLine'].infoSize()
      if (this.$refs['rightEchartsLine'].myChart)
        this.$refs['rightEchartsLine'].infoSize()
      if (this.$refs['leftEchartsGauge'].myChart)
        this.$refs['leftEchartsGauge'].infoSize()
      if (this.$refs['leftEchartsGauges'].myChart)
        this.$refs['leftEchartsGauges'].infoSize()
    }
  },
  beforeDestroy() {},
  methods: {
    getInfo() {
      const loading = this.$loading({
        lock: true,
        text: '数据加载中...', // 数据加载中...
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      setTimeout(async () => {
        loading.close()
        await this.$refs['rightTopEchartsLine'].getWarningChart()
        await this.getEquipRunningStat()
        await this.$refs['bottomLeftInfo'].getWarningRemind()
        await this.$refs['rightEchartsLine'].getAbnormalStat()
      }, 1000)
    },
    async getEquipRunningStat() {
      const res = await this.$axios.get(
        '/board/equip/abnormal/equipRunningStat'
      )
      if (res?.data.code === 200) {
        this.oneEqObj = res.data.data[0]
        this.twoEqObj = res.data.data[1]
        await this.$refs['leftEchartsGauge'].setEqActivationGaugeGauge(
          res.data.data[0]
        )
        await this.$refs['leftEchartsGauges'].setEqActivationGaugeGauges(
          res.data.data[1]
        )
      }
    }
  }
}
</script>
<style lang='scss' scoped>
.mes-container {
  position: fixed;
  z-index: 999999 !important;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  // background: radial-gradient(hwb(221 0% 34%) 20%, #001439 70%);
  background: url(../../../assets/images/kb01/kbbg01.jpg) no-repeat;
  background-size: 100% 100%;
  min-width: 1200px;
  min-height: 675px;
  .containerBox {
    position: relative;
    height: 100%;
    .contentBox {
      position: absolute;
      top: 70px;
      height: calc(100% - 70px);
      width: 100%;
      overflow: hidden;
      .allStyles {
        width: 50%;
        height: 100%;
        float: left;
      }
      .overview {
        height: 100%;
        background: rgba(15, 27, 71, 0.5);
        margin: 10px;
        width: calc(100% - 20px);
        height: calc(100% - 20px);
        padding: 10px 15px;
      }
      .panel {
        /* 边框 */
        box-sizing: border-box;
        border: 2px solid red;
        border-image: url(../../../assets/images/border2.png) 51 100 21 132;
        border-width: 2.125rem 1.583rem 0.875rem 2.125rem;
        position: relative;
        margin-bottom: 0.833rem;
      }
      .line {
        position: absolute;
        left: 0;
        top: 0;
      }
      .panel .inner {
        /* 装内容 */
        height: 45px;
        position: absolute;
        top: -2.125rem;
        right: -1.583rem;
        bottom: -0.875rem;
        left: -15px;
        padding: 10px 0;
      }
      .panel h3 {
        font-size: 16px;
        font-weight: normal;
        color: #00c3f4;
        margin: 0;
        padding: 0 0 0 10px;
        height: 35px;
        line-height: 35px;
        background: url(../../../assets/images/kbTitle2.png) no-repeat;
        background-size: 100% 100%;
        width: 30%;
      }
      .allBox {
        position: absolute;
        top: 10px;
        right: 0;
        bottom: 0;
        left: 0;
        // padding: 1rem 1.5rem;
        height: calc(100% - 25px);
        width: 100%;
      }
      .contentTopBox {
        height: 50%;
        overflow: hidden;
        .contentTopLeft {
          .leftTopall {
            border: 1px solid #0c89a7;
            width: calc(50% - 20px);
            height: calc(100% - 20px);
            float: left;
            padding: 10px;
            h1 {
              font-size: 18px;
              margin: 0;
              padding: 0;
              height: 40px;
              // line-height: 40px;
              color: #19c9e7;
              font-weight: normal;
            }
            .allEchartsBox {
              height: calc(100% - 40px);
              .imgDiv {
                height: 50%;
                .el-image {
                  width: 100%;
                  height: 100%;
                  border-radius: 5px;
                }
              }
            }
          }
          .contentLeft {
            margin: 10px;
          }
          .contentRight {
            margin: 10px;
          }
        }
        .contentTopRight {
        }
      }
      .contentBottomBox {
        height: 50%;
      }
    }
  }
}
</style>
